Changed font family. Fonts can be stacked. In the rule below, we stack the possible fonts from left to right
priority. That is, if the left-most is availble, use it otherwise use the next one and so on. Font imported
from google fonts
Realize that there are plenty of fonts attributes and properties not used in the example below.
@import url('https://fonts.googleapis.com/css2family=Kablammo&display =swap');
p {
font-family: 'Kablammo', cursive;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 23px;
line-height: 1.3em;
font-weight: 900;
font-variant: small-caps;
}
Colors can be used with their predefined names or by giving the color values in the following ways:
- rgb(r, g, b);
- hsl(h,s,l)
- hwb(h,w,b)
- Other non-rgb spaces allowing to show any visible color using lch(), oklch(), lab(), or oklab()
Additionally, colors can also include an additional alpha-channel ranging from zero to one
CSS art:
this could've been a lot easier, but here we are.
CSS rules/code for color section:
.inline-code {
font-family: 'Courier New', Courier, monospace;
background-color: gray;
padding: 2px;
border-radius: 5px;
display: inline;
}
#canvas {
border: 10px solid black;
border-radius: 25px;
margin: auto;
width: 75%;
height: 300px;
background-color: rgb(33, 86, 130);
}
#face {
top:50px;
position: relative;
margin:auto;
width:300px;
height:200px;
background-color: rgb(198, 159, 76);
clip-path:polygon(0% 10%,
5% 0%,
50% 10%,
95% 0%,
100% 10%,
95% 30%,
80% 80%,
50% 100%,
20% 80%,
5% 30%);
background-image: linear-gradient(60deg,rgba(0, 0, 0, 0.523) 30%, rgba(255, 255, 255, 0.249));
}
.eye{
position: relative;
top:25%;
left: 12%;
width: 30%;
height: 15%;
display: inline-block;
background-color: white;
clip-path: polygon(0% 0%,
90% 75%,
100% 100%,
20% 80%);
}
#right-eye {
left:25%;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
#mouth {
position: relative;
display: inline-block;
right: 17.5%;
top:60%;
width:10%;
height:5%;
}
#mouth-line {
stroke:rgb(0, 0, 0);
stroke-width:1;
fill: none;
}